
<!DOCTYPE html>
<html lang="en">
    <head>
<!--        字符解析编码-->
        <meta charset="UTF-8"/>
<!--        媒体识别-->
        <meta name="viewport" content="width=device-width,initial=scale=1.0">
<!--        样式-->
        <style rel="stylesheet" type="text/css">
            /*去除正文body 的内外间距*/
            body{
                margin:0;
                padding:0
            }
            /*底图加载容器的大小*/
            #container{
                width:'100%';
                height: 100vh
            }

        </style>
    </head>
    <body>
<!--        1.容器用于呈现地图-->
        <div id = "container">
        </div>
<!--        设置全局变量挂在再window窗口对象下-->
        <script type="text/javascript">
            //密钥设置到全局
            //高德地图自动调用
            window._AMapSecurityConfig={
               securityJsCode:'07484fac948ecc42f18fc16512bd252c'
            }
        </script>
<!--        加载官方地图脚本-->
        <script
            src="https://webapi.amap.com/maps?v=2.0&key=c63e30caa148f339ff68e35c5d15b5a8"
            type="text/javascript">
        </script>
<!--        自定义脚本-->

        <script type="text/javascript">
            //默认执行
            //创建一个地图对象进行初始化 并绑定页面的容器
             var map = new AMap.Map(
                'container',                       //加载地图的容器对象
                {
                    zoom: 25,                      //初始化地图的缩放比例
                    center: [121.474815,31.237216] //初始化中心点[经度,纬度]
                }
             )
            //当页面加载完毕
            window.onload = function(){
                //要经纬度 通过js代理注入
                //默认通过圆形操作写入 window对象中
                window.swift.setCurrentLocation()
            }
            //定位：提供鸿蒙端调用，
            function setLocation(lng, lat) {
                //设置中心点
                map.setZoomAndCenter(25, [lng,lat])

                //设置中心点标记
                var marker = new AMap.Marker({
                    map,
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                    position: [lng,lat]
                })
                //加入到地图中
                map.add(marker)
                //为地图新增插件：搜索
                map.plugin(['AMap.PlaceSearch'], function(){
                    //创建搜索功能对象，提供搜索设置
                    var MSearch = new AMap.PlaceSearch({
                        map,                //绑定的地图
                        pageSize: 4,        //每页多少条
                        pageIndex: 1,       //第几页：由近到远
                        extensions: 'base'  //扩展：基本
                    })
                    //为地图设置监听：当搜索结果完成时
                    AMap.Event.addListener(MSearch, 'complete', (res)=>{
                        //调用鸿蒙方法，将地址列表回传
                        window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
                    })
                    //执行搜索：会自动标记
                    MSearch.searchNearBy('停车场', [lng,lat])
                })
            }

        </script>
    </body>
</html>